<template>
  <div :style="{ ...getTextStyle(props[0].fields) }" class="c-scroll-text">
    <!-- <a
      :href="dataTrigger.link"
      v-if="dataTrigger.link"
    >
      <span
        class="sp-text"
        ref="textWrapper"
      >{{dataTrigger.text}}</span>
    </a> -->
    <span ref="textWrapper" class="sp-text">{{ dataTrigger.text }}</span>
  </div>
</template>
<script>
import componentRefresh from '@/mixins/componentRefresh'
export default {
  name: 'CScrollText',
  // mixins: [componentRefresh],
  props: {
    props: {
      type: Array,
      default: function() {
        return [
          {
            fields: []
          }
        ]
      }
    }
  },
  data() {
    return {
      animationHandler: []
    }
  },
  computed: {
    dataTrigger() {
      // if(this.props[1].fields[0].value.dataJson.json){
      //     let result = this.getResult(this.props[1].fields[0].value.dataJson.json)
      //     return result
      // }
      // else{
      // let link = this.props[0].fields[3].value[2].value.value
      const text = this.props[1].fields[0].value.value
      return { text }
      // }
    },
    animationTime() {
      return this.props[0].fields[3].value[2].value.value
    }
  },
  watch: {
    animationTime(val) {
      if (val > 0) {
        this.stopAnimation()
        this.startAnimation()
      }
    }
  },
  mounted() {
    this.startAnimation()
  },
  destroyed() {
    this.stopAnimation()
  },
  methods: {
    startAnimation() {
      this.$nextTick(() => {
        const second = this.animationTime
        if (second === 0) return
        this.$refs.textWrapper.style.transition = `all ${second}s linear`
        this.animation()
      })
    },
    async animation() {
      const animationWidth = this.props[0].fields[0].value[0].value.value
      this.$refs.textWrapper.style.transition = 'all 0s linear'
      if (!this.first) {
        this.$refs.textWrapper.style.transform = 'translateX(0px)'
        this.first = true
      } else {
        this.$refs.textWrapper.style.transform = `translateX(${animationWidth}px)`
      }
      await new Promise(resolve => setTimeout(resolve, 30))
      let second = this.animationTime
      second = !this.first ? second : second * 2
      this.$refs.textWrapper.style.transition = `all ${second}s linear`
      this.$refs.textWrapper.style.transform = `translateX(-${animationWidth}px)`
      const milliSecond = this.animationTime * 1000
      this.animationHandler.push(setTimeout(this.animation, !this.first ? milliSecond : milliSecond * 2))
    },
    stopAnimation() {
      if (this.animationHandler.length > 0) {
        this.animationHandler.forEach(item => {
          clearTimeout(item)
        })
      }
    },
    getTextStyle(item) {
      const fontSize = item[3].value[0].value.value
      const fontColor = item[3].value[1].value.value
      const fontFamily = item[3].value[3].value.value
      return {
        'font-size': fontSize + 'px',
        color: fontColor,
        fontFamily
      }
    },
    getResult(json) {
      let jsonArray = []
      try {
        jsonArray = JSON.parse(json)
      } catch (e) {
        console.warn(e.message)
      }
      const model = this.props[1].fields[0].value.dataJson.model
      const fieldText = model[0].field
      const mappingText = model[0].mapping
      const keyText = mappingText || fieldText

      const fieldLink = model[1].field
      const mappingLink = model[1].mapping
      const keyLink = mappingLink || fieldLink
      return jsonArray.length > 0
        ? {
            text: jsonArray[0][keyText],
            link: jsonArray[0][keyLink]
          }
        : {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.c-scroll-text {
	// position: relative;
	// text-overflow: hidden;
	height: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
	// display: inline-block;
	.sp-text {
		display: inline-block;
    font-weight:600;
	}
}
</style>
